<template>
    <div class="idcard-two">
        <div class="idcard-modal" v-if="0">
            <!-- <div class="img"><img src="../../assets/image/loading.gif" alt=""></div>
            <p>识别中...</p> -->
        </div>
        <div class="unsuccess" v-if="!issuccess">
            <div class="img" @click="takephoto()">
                <img v-if="cardsrc==''" src="../../assets/image/bg-card.png" alt="">
                <img v-if="cardsrc!=''" :src="cardsrc" alt="">
            </div>
            <div class="camrea-title">拍摄身份证人像面</div>
            <p><span>●</span>请正对身份证人像面拍摄</p>
            <p><span>●</span>请保证身份证字迹清晰</p>
            <router-link to="" class="next-step">下一步</router-link>
            <router-link v-if="register_status==1" to="/register" class="go-resgiter">直接注册</router-link>
        </div>
        <div class="success" v-if="issuccess">
            <div class="img">
                <img :src="cardsrc" alt="">
            </div>
            <div class="camrea-title">信息确认</div>
            <p>
                <span>姓<i>哈哈</i>名：</span>
                <span :class="[{'havebd': ss&&!focus&&!focus_one}]"><input :disabled="disabled" @focus="focus=true" @blur="focus=false" type="text" v-model="id_name"></span>
                <span v-if="focus" @click="deletInfo(1)" class="un-close"><img src="../../assets/image/un-close.png" alt=""></span>
            </p>
            <p>
                <span>身份证号：</span>
                <span><input :disabled="disabled" type="text"  @focus="focus_one=true" @blur="focus_one=false"  v-model="id_card"></span>
                <span v-if="focus_one" @click="deletInfo(2)" class="un-close"><img src="../../assets/image/un-close.png" alt=""></span>
            </p>
            <div v-if="changered&&inputred"  :class="['jbhf',{'cred': changered&&inputred}]">身份证信息格式错误，请重新拍摄 </div>
            <div v-if="!changered" @click="nextstep()" class="next-step">完成</div>
            <div v-if="changered" :class="['next-step',{'chs': changered}]">完成</div>
            <!-- <div class="error">如遇到识别信息有误请<div @click="again()">重新拍摄</div>或<div style="display: inline-block;" @click="jump()">点击申诉</div></div> -->
            <div class="error">如遇到识别信息有误请<div @click="again()">重新拍摄</div>或<div style="display: inline-block;" @click="changeInput()">手动编辑</div></div>
        </div>
    </div>
</template>

<script>
import Header from '../common/header';

import axios from 'axios';
import Wx from 'weixin-js-sdk';
import utils from '../../extend/utils.js';
import { MessageBox, Toast, Popup } from 'mint-ui';
export default {
    data () {
        return {
            ss: false,
            cardsrc: '',
            issuccess: false,
            name: '',
            id_card: '',
            cardInfo: [],
            register_status: this.$route.query.register_status,
            changered: false,
            inputred: false,
            id_name: '',
            disabled: true,
            limit: 1,
            original_id_name: '',
            original_id_card: '',
            click_limit: 1,
            focus: false,
            focus_one: false
        }
    },
    created() {

    },
    mounted () {
        const vm = this;
        const myurl = window.location.href;
        vm.wxShare(myurl);    
    },
    watch: {
        id_card: function(newv,oldv){
            console.log(newv)
            let reg15 = /^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$/;
            let reg18 = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
            if(newv.length<=15){
                if(!reg15.test(newv)){
                    this.changered = true;
                    return;
                }else {
                    this.changered = false;
                    return;
                }
            }else if(newv.length>15) {
                if(!reg18.test(newv)){
                    this.changered = true;
                    return;
                }else {
                    this.changered = false;
                    return;
                }
            }
        }  
    },
    methods: {
        deletInfo(index){
            const vm = this;
            // index==1?vm.id_name='':vm.id_card='';

            if(index==1){
                vm.id_name='';
                vm.focus = true;
            }else {
                vm.id_card=''
                vm.focus_one = true;
            }

        },
        takephoto(){
            // const vm = this;
            // vm.cardsrc = 'http://ldfs.oss-cn-shenzhen.aliyuncs.com/14539884e9e259cbd08098b3105028df.jpg';
            // vm.updateimg(vm.cardsrc);


            const vm = this,
            upload = vm.wxUpload(Wx);
            let ajaxUp = function(id) {
                axios.post('/Api/Upload/downloadWxImage', {'media_id': id}).then(json => {
                    vm.sheetVisible = false;
                    // 上传成功，后台不保存，前台更新用户头像
                    if (json.data.code == 1) {
                        vm.cardsrc = json.data.url;
                        vm.updateimg(json.data.url);
                    } else {
                        MessageBox.alert(json.data.msg);
                    }
                }, function() {
                    MessageBox.alert('网络异常，上传失败');
                });
            }
            Wx.ready(function(){
                upload.takePhoto(ajaxUp, 1);
            });
           
        },
        updateimg(url){
            const vm  = this;
            axios.post('/Api/OcrCard/checkCard',{image_url: url}).then(res=>{
                const data = res.data;
                console.log(data);
                if(data.code==0){
                    MessageBox.alert('', {
                        title: `识别错误`,
                        message: `请在光线较好的区域正对身份证重新拍摄`,
                    }).then(()=>{
                        vm.cardsrc = '';
                        vm.takephoto();
                    })
                }else if(data.code==1){
                    vm.issuccess = true;
                    vm.id_name = vm.original_id_name = data.data.name;
                    vm.id_card = vm.original_id_card = data.data.id_card_number;
                    
                    let reg15 = /^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$/;
                    let reg18 = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
                    if(vm.id_card.length<=15){
                        if(!reg15.test(vm.id_card)){
                            vm.changered = true;
                             vm.inputred = true;
                            return;
                        }
                    }else if(vm.id_card.length>15) {
                        if(!reg18.test(vm.id_card)){
                           vm.changered = true;
                            vm.inputred = true;
                            return;
                        }
                    }
                
                    vm.cardInfo = data.data;
                        console.log(vm.cardInfo,555555555555555555555);
                }
            }).catch(()=>{MessageBox.alert('网络错误')});
        },
        again(){
            const vm = this;
            window.location.reload();
        },
        // jump(){
        //     const vm = this;
        //     vm.cardInfo = utils.encrypt(JSON.stringify(vm.cardInfo),'hAw6eqnFLKxpsDv3');
        //     vm.$router.replace({path: '/appeal',query: {'appeal_reason': 1,cardInfo: vm.cardInfo}});
        // },
        
        changeInput(){
            const vm = this;
            vm.disabled = false;
            vm.ss = true;
            vm.limit = 2;
        },
        nextstep(){
            const vm = this;
            let reg15 = /^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$/;
            let reg18 = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
            if(vm.id_card.length<=15){
                if(!reg15.test(vm.id_card)){
                    vm.changered = true;
                    vm.inputred = true;
                    return;
                }
            }else if(vm.id_card.length>15) {
                if(!reg18.test(vm.id_card)){
                    vm.changered = true;
                    vm.inputred = true;
                    return;
                }
            }
            if(vm.limit == 2){
                let checkObj = {
                    name: vm.id_name,
                    idNumber: vm.id_card
                }
                if(vm.click_limit == 1){
               
                    vm.click_limit = 2;
                    axios.post('/Api/OcrCard/checkIdentity',checkObj).then(res => {
                        const data = res.data;
                      
                        if(data.code==1){
                            vm.click_limit = 1;
                            axios.post('/Weixin/Member/checkIdNumber',{idNumber: vm.id_card}).then(res=>{
                                    if(res.data.code==1){
                                        MessageBox.confirm('', {
                                            title: `身份认证失败`,
                                            message: `您认证的身份证已被平台其他用户绑<br>定，请重新认证或者联系客服申诉`,
                                            confirmButtonText: '点击申诉',
                                            cancelButtonText: '重新认证',
                                            showCancelButton: true,
                                             closeOnClickModal: false
                                            }).then(() => {
                                                vm.cardInfo.name = vm.id_name;
                                                vm.cardInfo.id_card_number = vm.id_card;
                                                vm.cardInfo = utils.encrypt(JSON.stringify(vm.cardInfo),'hAw6eqnFLKxpsDv3');
                                                vm.$router.replace({path: '/appeal',query: {'appeal_reason': 0,cardInfo: vm.cardInfo}});
                                        }).catch(() => {
                                                window.location.reload();
                                        });
                                    }else {
                                        let seObj = {
                                            new_name: vm.id_name,
                                            new_idNumber: vm.id_card,
                                            old_name: vm.original_id_name,		
                                            old_idNumber: vm.original_id_card,
                                            card_img: vm.cardsrc
                                        }
                                        axios.post('/Weixin/Member/cardEdit',seObj).then(res => {
                                            const data = res.data;
                                            if(data.code==1){
                                                let obj = {
                                                    name: vm.id_name,
                                                    gender: vm.cardInfo.gender,
                                                    birthDate: vm.cardInfo.birthday,
                                                    idNumber: vm.id_card,
                                                    card_img: vm.cardsrc,
                                                    nation: vm.cardInfo.race,
                                                    address: vm.cardInfo.address
                                                }
                                                axios.post('/Weixin/Member/bindIdCard',obj).then(res=>{
                                                    const data = res.data;
                                                    if(data.code==1){
                                                        vm.$store.state.refesh = true;
                                                        vm.$router.replace('/my_order');
                                                    }else {
                                                        MessageBox.alert(data.msg);
                                                    }
                                                }).catch(()=>{MessageBox.alert('网络错误')})
                                            }
                                        }).catch(()=>{MessageBox.alert('网络错误')});
                                    }


                                    
                                })
                            
                            
                        }else {
                            vm.click_limit = 1;
                            MessageBox.alert('实名认证错误');
                        }



                    }).catch(()=>{MessageBox.alert('网络错误')});
                }
                return;
            }

            axios.post('/Weixin/Member/checkIdNumber',{idNumber: vm.id_card}).then(res=>{
                const data = res.data;
               
                console.log(vm.cardInfo,'info');
                if(data.code==1){
                    MessageBox.confirm('', {
                        title: `身份认证失败`,
                        message: `您认证的身份证已被平台其他用户绑<br>定，请重新认证或者联系客服申诉`,
                        confirmButtonText: '点击申诉',
                        cancelButtonText: '重新认证',
                        showCancelButton: true,
                        closeOnClickModal: false
                        }).then(() => {
                            vm.cardInfo = utils.encrypt(JSON.stringify(vm.cardInfo),'hAw6eqnFLKxpsDv3');
                            vm.$router.replace({path: '/appeal',query: {'appeal_reason': 0,cardInfo: vm.cardInfo}});
                    }).catch(() => {
                            window.location.reload();
                    });
                }else {
                    if(vm.cardInfo.gender == '男'){
                        vm.cardInfo.gender = 'male';
                    }else if(vm.cardInfo.gender == '女'){
                        vm.cardInfo.gender = 'famale';
                    }else if(vm.cardInfo.gender == 'null'){
                        vm.cardInfo.gender = '未知';
                    }
                    let obj = {
                       
                        name: vm.cardInfo.name,
                        gender: vm.cardInfo.gender,
                        birthDate: vm.cardInfo.birthday,
                        idNumber: vm.cardInfo.id_card_number,
                        card_img: vm.cardsrc,
                        nation: vm.cardInfo.race,
                        address: vm.cardInfo.address
                    }
                    axios.post('/Weixin/Member/bindIdCard',obj).then(res=>{
                        const data = res.data;
                        if(data.code==1){
                            vm.$router.replace('/my_order');
                        }else {
                            MessageBox.alert(data.msg);
                        }
                    }).catch(()=>{MessageBox.alert('网络错误')})
                    
                }
            })
        }
    }
}
</script>

<style type="text/css">
    .mint-msgbox-confirm {
        color: #3CACF8;  
    }
</style>
